﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>上传带xy值的文本文件进行可视化</title>

    <link href="CSS/main.css" rel="stylesheet" type="text/css" />    
    <script src="Script/script.js"></script>
    <script src="Script/hyxCanvas.js"></script>
</head>
<style type="text/css">
    #canv{
            width: 600px;
            height: 400px;
            border:1px solid lightblue;
            display: none;
        }

</style>
<body>
    <header>
            <h2>拖动文本到此</h2>
            <a href="http://www.script-tutorials.com/pure-html5-file-upload/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
            
        </header>
        <div class="container">
            <div class="contr">

                <a style="padding:10px;display:inline;margin:10px;border:10px;">You can select the file (image) and click Upload button</a>
                
            </div>

            <div class="upload_form_cont">
                <form id="upload_form" enctype="multipart/form-data" method="post" action="doAction.aspx">
                    <div>
                        <div><label for="image_file">Please select image file</label></div>
                        <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div>
                    </div>
                    <div>
                        <input type="text" id="attachinfo" name="attachinfo" placeholder="附加信息" />
                        <input type="text" id="long" name="long" placeholder="输入文件的坐标(long,lat)" />
                        <input type="button" value="Upload" onclick="startUploading()" />
                    </div>
                    <div id="fileinfo">
                        <div id="filename"></div>
                        <div id="filesize"></div>
                        <div id="filetype"></div>
                        <div id="filedim"></div>
                    </div>
                    <canvas id="canv">Browser not support Canvas</canvas>
                    <div id="error">You should select valid image files only!</div>
                    <div id="error2">An error occurred while uploading the file</div>
                    <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div>
                    <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div>

                    <div id="progress_info">
                        <div id="progress"></div>
                        <div id="progress_percent">&nbsp;</div>
                        <div class="clear_both"></div>
                        <div>
                            <div id="speed">&nbsp;</div>
                            <div id="remaining">&nbsp;</div>
                            <div id="b_transfered">&nbsp;</div>
                            <div class="clear_both"></div>
                        </div>
                        <div id="upload_response"></div>
                    </div>
                </form>

                <img id="preview" />
            </div>
        </div>
</body>
</html>
